<template>
  <!-- 抢案案件 --> 
  <section class="page robbery-case">
    <data-form :model="roleModel" @onSearch="refreshData" @handleResetForm="handleResetForm" :page="pageService">
      <template slot="inputs">
        <el-form-item label="借据号" prop="caseNumber">
          <el-input v-model="roleModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="roleModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="roleModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="roleModel.idCard"></el-input>
        </el-form-item>
        <!--  机构有问题还没改 -->
        <el-form-item label="机构" prop="deptIds">
          <!-- <el-cascader v-model="roleModel.deptIds" :options="departmentData" :props="{value:'id',label:'deptName'}" change-on-select :show-all-levels="false" clearable></el-cascader> -->
          <select-department :specialOptions="specialOptions" v-model="roleModel.deptIds"></select-department>
        </el-form-item>
        <el-form-item label="地区" prop="area">
          <el-cascader v-model="roleModel.area" :options="$city.getCityData()" change-on-select clearable></el-cascader>
        </el-form-item>
        <el-form-item label="催收员" prop="currentCollectorRealName">
          <el-input v-model="roleModel.currentCollectorRealName"></el-input>
        </el-form-item>
        <!-- <el-form-item label="顾客类型" prop="customerCategory">
          <el-select v-model="roleModel.customerCategory" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('CustomerCategory')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="案件金额" prop="overdueAmount">
          <number-range v-model="roleModel.overdueAmount" :isInteger="true"></number-range>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod">
          <el-select v-model="roleModel.overduePeriod" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="roleModel.overdueDays" :isInteger="true"></number-range>
        </el-form-item>
        <el-form-item label="行动代码:" prop="followupBack">
          <el-select v-model="roleModel.followupBack" @change="setCheckTime" clearable>
            <el-option v-for="{name,id} in customDataDict.filter(v=>v.dataType==='FOLLOW_UP').filter(m=>m.name!=='行动代码')" :key="id" :label="name" :value="id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流转来源" prop="turnSource">
          <el-select placeholder="请选择" v-model="roleModel.turnSource" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('TurnSource')" :key="index" :label="name" :value="code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系统来源" prop="sysCode">
          <el-select v-model="roleModel.sysCode" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('SysCode')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="roleModel.productName"></el-input>
        </el-form-item>
        <el-form-item label="案件流入时间" prop="followInTime">
          <el-date-picker type="daterange" :editable="false" v-model="roleModel.followInTime" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="roleDataSet" @onPageChange="refreshData" :page="pageService" :selectionList.sync="selectionList">
      <template slot="buttons">
         <el-button @click="manualDistruibute" v-auth = "1803">分案</el-button>
        <el-button @click="robberyClick" v-auth = "1804">抢案</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column label="操作" :min-width="$helper.getOperateWidth(3)">
          <template slot-scope="scope">
            <el-button @click="openExecutionPage(scope.row)" type="text">案件详情</el-button>
            <el-button @click="followrecordsclick(scope.row)" type="text">跟进记录</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="caseNumber" label="借据号" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :formatter="(row)=>$filter.encryptPhone(row.mobileNo)" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" :formatter="(row)=>$filter.encryptIDCardFour(row.idCard)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="area" label="地区" :formatter="(row) => $city.getInheritNames(Number(row.area))" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="案件金额（元）" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期阶段" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="sysCode" label="系统来源" :formatter="(row) => $filter.encryptSysCode(row.sysCode)" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <!-- <el-table-column prop="customerCategory" label="顾客类型" :formatter="(row) => $filter.dictConvert(row.customerCategory,'CustomerCategory')" :min-width="$helper.getColumnWidth(6)">
        </el-table-column> -->
        <el-table-column prop="departmentName" label="机构" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="currentCollectorRealName" label="催收员" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="turnSource" label="流转来源" :formatter="(row) => $filter.dictConvert(row.turnSource,'TurnSource')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="followInTime" label="案件流入时间" :formatter="(row) => $filter.dateTimeFormat(row.followInTime)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="followupBack" label="行动代码" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.followupBack | dictcustomConvert(scope.row.FollowupBack)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lawPhase" label="诉讼状态" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="unCheatResult" label="反欺诈结果" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>
    <!-- 抢案申请 -->
    <el-dialog title="抢案申请" :center="true" :visible.sync="dialog.robbery" width="800px" @open="$nextTick(()=>$refs['robbery-components'].update())" @close="$refs['robbery-components'].reset()">
      <robbery-components :caseIds="caseIds" @close="dialog.robbery=false;refreshData()" ref="robbery-components"></robbery-components>
    </el-dialog>
    <!-- 跟进记录 -->
    <el-dialog title="跟进记录" :center="true" :visible.sync="dialog.followrecordShow" width="1200px" @open="$nextTick(()=>$refs['follow-up-record-common'].update())">
      <follow-up-record-common :followUpId="followUpId" ref="follow-up-record-common"></follow-up-record-common>
    </el-dialog>
    <!-- 点击分案 -->
     <el-dialog title="案件分配" :center="true" :visible.sync="dialog.distrubute" width="600px" @open="$nextTick(()=>$refs['repair-case-distrubute'].update())">
      <repair-case-distrubute ref="repair-case-distrubute" @close="dialog.distrubute=false;refreshData()" @success="refreshData" :robberyCaseTrue="robberyCaseTrue" :selectionList="selectionList"></repair-case-distrubute>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Auth, Layout, Dependencies } from '~/core/decorator';
import { RoleService } from '~/services/management-service/role.service';
import { PageService } from '~/utils/page.service';
import DataForm from '~/components/common/data-form.vue';
import DataBox from '~/components/common/data-box.vue';
import { State, Getter, Action, namespace } from 'vuex-class';
import { RobCaseService } from '~/services/domain-service/rob-case.service.ts';
import { SortService } from '~/utils/sort.service';
import RobberyComponents from '~/components/common-manages/robbery-components.vue';
import FollowUpRecordCommon from '~/components/common-manages/follow-up-record-common.vue';
import NumberRange from '~/components/common/number-range.vue';
import { OpenExecutionData } from "~/config/types";
import { ApplyType, CASE_CHANNEL } from '~/config/enum.config';
import RepairCaseDistrubute from "~/components/common-manages/credit-repair-case/repair-case-distrubute.vue";
import SelectDepartment from "~/components/business-component/select-department.vue";
import { CommonService } from "~/utils/common.service";
import { DepartmentService } from "~/services/management-service/department.service";

const CollectionExecutionModule = namespace('collection-execution');

@Layout('workspace')
@Component({
  components: {
    DataForm,
    DataBox,
    RobberyComponents,
    NumberRange,
    FollowUpRecordCommon,
    RepairCaseDistrubute,
    SelectDepartment
  },
})
export default class RobberyCase extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(RobCaseService) private robCaseService: RobCaseService;
  @Dependencies(SortService) private sortService: SortService;
  @Dependencies(DepartmentService) private departmentService: DepartmentService;
  @Getter private departmentData;
  @State private customDataDict;
  @CollectionExecutionModule.Action private openCollectionExecution;
  private selectionList: any = [];
  private caseIds: any = []
  private roleModel: any = {
    caseNumber: '',   // 借据号
    personalName: '',  // 客户姓名
    mobileNo: '',     // 联系电话
    idCard: '',       // 身份证号
    deptIds: [],      // 机构
    area: [],       // 地区
    currentCollectorRealName: '', // 催收员
    customerCategory: '',   // 客户类型
    overdueAmount: {        // 案件金额
      max: '',
      min: '',
    },
    overduePeriod: '',   // 逾期阶段
    overdueDays: {
      max: '',
      min: '',
    },
    followupBack: '',    // 行动代码
    turnSource: '',      // 流转来源
    sysCode: '',  // 系统来源
    productName: '',     // 产品名称
    followInTime: [],    // 案件流转时间
  };
  private followUpId:any = ""; // 跟进id
  private roleDataSet = [];
  private roleObj: any = {};
  private specialOptions: any[] = []
  private dialog: any = {
    distrubute: false, // 分案
    robbery: false, //  抢案
    followrecordShow:false, //  跟进记录
  };
  private robberyCaseTrue:boolean = true  
  /**
   * 获取案件数据
   */
  private refreshData() {
    this.selectionList = []
    this.robCaseService
      .robCasesQuery(this.roleModel, this.pageService)
      .subscribe((data) => {
        this.roleDataSet = data
      });
  }
  /**
   * 范围输入框的重置
   */
  private handleResetForm() {
    this.roleModel.overdueAmount = { min: '', max: '' }
    this.roleModel.overdueDays = { max: '', min: '' }
  }

  /**
   * 点击抢案
   */
  private robberyClick() {
    if (this.selectionList.length <= 0) {
      this.$message.info('请先选择案件');
      return
    }
    this.caseIds = this.selectionList.map(v => v.id)
    this.dialog.robbery = true
  }
  /**
   * 点击 跟进记录
   */
  private followrecordsclick(row){
    this.followUpId = row.id
    this.dialog.followrecordShow = true
  }

  /**
   * 行动代码
   */
  private setCheckTime() {
    if (!this.roleModel.followupBack) {
      this.roleModel.checkTime = '';
    }
    // if (
    //   this.roleModel.followupBack === 'PTP' ||
    //   this.roleModel.followupBack === 'CAPT'
    // ) {
    //   const currentTime: any = new Date();
    //   this.roleModel.checkTime = this.$filter.dateTimeFormat(
    //     new Date((currentTime / 1000 + 86400 * 3) * 1000),
    //   );
    // } else {
      const currentTime: any = new Date();
      this.roleModel.checkTime = this.$filter.dateTimeFormat(
        new Date((currentTime / 1000 + 86400*7) * 1000),
      );
    // }
  }
  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.openCollectionExecution(new OpenExecutionData(row.id, row.caseNumber, CASE_CHANNEL.tel, true,true))
  }

  //获取委外和电催部门数据
  private queryTelAndVisitDepartment() {
    this.departmentService.queryTelAndVisitDepartment().subscribe(
      data =>{ this.specialOptions = CommonService.generateTreeData(data, {
        keyName: 'id',
        parentKeyName: 'parentId'
      })
    })
  }

  private mounted() {
    this.refreshData();
    this.queryTelAndVisitDepartment();
  }
  /**
   *  点击分案
   */
  private manualDistruibute() {
    if (this.selectionList.length === 0) {
      this.$message("请选择要分配的案件");
    } else {
      this.robberyCaseTrue = true
      this.dialog.distrubute = true;
    }
  }



}
</script>

<style lang="less">
</style>
